<template>
  <div class="modal-header">
    <div class="modal-title">
      <span>{{ l('NotificationSettings') }}</span>
    </div>
  </div>

  <div class="modal-body">
    <h3>{{ l('ReceiveNotifications') }}</h3>
    <label>
      <a-switch :loading="loading" v-model:checked="settings.receiveNotifications"></a-switch>
    </label>
    <span class="help-block">{{ l('ReceiveNotifications_Definition') }}</span>

    <h3 v-if="settings.notifications && settings.notifications.length">
      {{ l('NotificationTypes') }}
    </h3>
    <p
      v-if="
        settings.notifications && settings.notifications.length && !settings.receiveNotifications
      "
      class="text-danger"
    >
      <small style="color: red">{{ l('ReceiveNotifications_DisableInfo') }}</small>
    </p>

    <div v-for="item in settings.notifications" :key="item.displayName">
      <a-checkbox v-model:checked="item.isSubscribed" :disabled="!settings.receiveNotifications">
        {{ item.displayName }}
      </a-checkbox>
    </div>
  </div>

  <div class="modal-footer">
    <a-button type="button" @click="close()" :disabled="saving">
      {{ l('Cancel') }}
    </a-button>
    <a-button type="primary" @click="save()" :disabled="saving" :loading="saving">
      {{ l('Save') }}
    </a-button>
  </div>
</template>
<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import {
    GetNotificationSettingsOutput,
    NotificationServiceProxy,
    UpdateNotificationSettingsInput,
    NotificationSubscriptionDto,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import * as _ from 'lodash';
  export default defineComponent({
    name: 'HeaderNotificationSettingsComponent',
    mixins: [ModalComponentBase],
    data() {
      return {
        settingsVal: new GetNotificationSettingsOutput(),
        saving: false,
        loading: false,
        notificationService: new NotificationServiceProxy(),
      };
    },
    computed: {
      settings: {
        get() {
          return this.settingsVal;
        },
        set(val) {
          this.settingsVal = val;
        },
      },
    },
    created() {
      this.fillServiceProxy();
      this.loading = true;
      this.notificationService
        .getNotificationSettings()
        .finally(() => {
          this.loading = false;
        })
        .then((res) => {
          this.settings = res;
        });
    },
    methods: {
      save() {
        this.saving = true;

        const input = new UpdateNotificationSettingsInput();
        input.receiveNotifications = this.settings.receiveNotifications;
        input.notifications = _.map(this.settings.notifications, (n) => {
          const subscription = new NotificationSubscriptionDto();
          subscription.name = n.name;
          subscription.isSubscribed = n.isSubscribed;
          return subscription;
        });

        this.notificationService
          .updateNotificationSettings(input)
          .finally(() => {
            this.saving = false;
          })
          .then(() => {
            this.notify.info(this.l('SavedSuccessfully'));
            this.close();
          });
      },
    },
  });
</script>
<style lang="less" scoped>
  h3 {
    font-size: initial;
    margin-top: 10px !important;
  }
</style>
